{% extends "base.html" %}

{% block content %}
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2><i class="bi bi-kanban"></i> 需求看板</h2>
        <div class="d-flex gap-2">
            <a href="{{ url_for('requirements.export_requirements') }}" class="btn btn-outline-success">
                <i class="bi bi-file-earmark-excel"></i> 导出Excel
            </a>
            <a href="{{ url_for('requirements.classify') }}" class="btn btn-primary">
                <i class="bi bi-plus-circle"></i> 新建需求
            </a>
        </div>
    </div>

    <!-- 筛选和统计 -->
    <div class="row g-3 mb-4">
        <div class="col-md-6">
            <div class="input-group search-bar">
                <span class="input-group-text"><i class="bi bi-search"></i></span>
                <input type="text" class="form-control" placeholder="搜索需求ID或描述...">
            </div>
        </div>
        <div class="col-md-6 d-flex gap-2 justify-content-end">
            <button class="btn btn-outline-secondary">全部状态</button>
            <button class="btn btn-outline-secondary">我的需求</button>
            <button class="btn btn-outline-secondary">高级筛选</button>
        </div>
    </div>

    <!-- 风险需求提醒 -->
    {% if risk_requirements %}
    <div class="alert alert-danger alert-dismissible fade show mb-4">
        <div class="d-flex">
            <i class="bi bi-exclamation-triangle fs-2 me-3"></i>
            <div class="flex-grow-1">
                <h5 class="alert-heading d-flex justify-content-between">
                    <span>风险需求 <span class="badge bg-danger ms-2">{{ risk_requirements|length }}</span></span>
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </h5>
                <div class="row g-2">
                    {% for req in risk_requirements %}
                    <div class="col-md-4">
                        <div class="card border-danger h-100">
                            <div class="card-body py-2">
                                <div class="d-flex justify-content-between">
                                    <h6 class="card-title mb-1">
                                        <a href="{{ url_for('requirements.detail', req_id=req.req_id) }}">
                                            {{ req.req_id }}
                                        </a>
                                    </h6>
                                    <span class="badge bg-danger">滞留 {{ (now - req.status_update_time).days }} 天</span>
                                </div>
                                <p class="card-text small mb-1">{{ req.description|truncate(40) }}</p>
                                <div class="d-flex justify-content-between">
                                    <small class="text-muted">{{ req.classification.full_path.split('>')[-1] }}</small>
                                    <small class="text-muted">P{{ req.priority }}</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- 看板视图 -->
    <div class="kanban-board">
        <div class="row g-3">
            {% for status, requirements in status_groups.items() %}
            <div class="col-md-3">
                <div class="card kanban-column h-100">
                    <div class="card-header d-flex justify-content-between align-items-center bg-light">
                        <h5 class="card-title mb-0">
                            {% if status == '待办' %}
                                <i class="bi bi-list-task text-primary"></i>
                            {% elif status == '进行中' %}
                                <i class="bi bi-hourglass-split text-warning"></i>
                            {% elif status == '已完成' %}
                                <i class="bi bi-check-circle text-success"></i>
                            {% else %}
                                <i class="bi bi-question-circle text-secondary"></i>
                            {% endif %}
                            {{ status }}
                        </h5>
                        <span class="badge bg-secondary rounded-pill">{{ requirements|length }}</span>
                    </div>
                    <div class="card-body p-2 overflow-auto" style="min-height: 500px; max-height: 70vh;">
                        <div class="list-group list-group-flush kanban-drag-area">
                            {% for req in requirements %}
                            <div class="list-group-item kanban-item p-3 mb-2 rounded-3 shadow-sm" 
                                 draggable="true" 
                                 data-req-id="{{ req.req_id }}">
                                <div class="d-flex justify-content-between align-items-start">
                                    <div>
                                        <div class="d-flex justify-content-between">
                                            <small class="text-muted">#{{ req.req_id }}</small>
                                            <span class="badge bg-{{ 'danger' if req.priority > 8 else 'warning' if req.priority > 5 else 'success' }}">
                                                P{{ req.priority }}
                                            </span>
                                        </div>
                                        <h6 class="mt-1 fw-bold">{{ req.description|truncate(50) }}</h6>
                                    </div>
                                    <a href="{{ url_for('requirements.detail', req_id=req.req_id) }}" class="ms-2">
                                        <i class="bi bi-arrow-right-circle"></i>
                                    </a>
                                </div>
                                <div class="d-flex justify-content-between mt-2">
                                    <small class="text-truncate">
                                        {{ req.classification.full_path.split('>')[-1] }}
                                    </small>
                                    <small class="text-muted">
                                        {{ (now - req.request_time).days }}天
                                    </small>
                                </div>
                            </div>
                            {% else %}
                            <div class="text-center text-muted py-5">
                                <i class="bi bi-inbox fs-1"></i>
                                <p class="mb-0 mt-2">无需求</p>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 实现拖拽功能
    document.querySelectorAll('.kanban-item').forEach(item => {
        item.addEventListener('dragstart', e => {
            e.dataTransfer.setData('text/plain', item.dataset.reqId);
        });
    });

    document.querySelectorAll('.kanban-column').forEach(column => {
        column.addEventListener('dragover', e => {
            e.preventDefault();
            column.style.backgroundColor = '#f8f9fa';
        });
        
        column.addEventListener('dragleave', () => {
            column.style.backgroundColor = '';
        });
        
        column.addEventListener('drop', async e => {
            e.preventDefault();
            column.style.backgroundColor = '';
            
            const reqId = e.dataTransfer.getData('text/plain');
            const newStatus = column.querySelector('.card-title').textContent;
            
            try {
                const response = await fetch(`/requirements/${reqId}/update_status`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({ status: newStatus })
                });
                
                const result = await response.json();
                if (result.success) {
                    // 移动DOM元素到新列
                    const item = document.querySelector(`[data-req-id="${reqId}"]`);
                    column.querySelector('.list-group').appendChild(item);
                } else {
                    alert('状态更新失败: ' + (result.message || '未知错误'));
                }
            } catch (error) {
                console.error('请求失败:', error);
                alert('请求失败，请检查网络连接');
            }
        });
    });
});
</script>
{% endblock %}